<template>
  <w-modal ref="WModal" :title="model ? '修改' : '添加'" :success-func="successFunc" :span="[3]">
    <template v-slot:default>
      <a-form-item label="公司名称">
        <a-input
          v-decorator="['name', { rules: [{ required: true, message: '请输入' }], initialValue: model ? model.name : '' }]"
          placeholder="请输入"
        />
      </a-form-item>
      <a-form-item label="时间" required>
        <a-form-item :style="{ display: 'inline-block', width: '200px' }">
          <a-date-picker
            v-decorator="['startDate', { rules: [{ required: true, message: '请选择' }], initialValue: model ? model.startTime : null }]"
            style="width: 100%"
          />
        </a-form-item>
        <span :style="{ display: 'inline-block', width: '24px', textAlign: 'center' }">-</span>
        <a-form-item :style="{ display: 'inline-block', width: '200px' }">
          <a-date-picker
            v-decorator="['endDate', { rules: [{ required: true, message: '请选择' }], initialValue: model ? model.endTime : null }]"
            style="width: 100%"
          />
        </a-form-item>
      </a-form-item>
      <a-form-item label="Logo">
        <image-up ref="ImageUp" :souce-url="icon" />
      </a-form-item>
      <a-form-item label="公司详情">
        <a-input
          v-decorator="['detail', { initialValue: model ? model.detail : '' }]"
          placeholder="请输入"
        />
      </a-form-item>
      <a-form-item label="职责">
        <a-input
          v-decorator="['obligation', { initialValue: model ? model.obligation : '' }]"
          placeholder="请输入"
        />
      </a-form-item>
      <a-form-item label="网站">
        <a-input v-decorator="['url', { initialValue: model ? model.url : '' }]" placeholder="请输入" />
      </a-form-item>
    </template>
  </w-modal>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import ImageUp, { OssImageUpType } from '@/components/global/imageUp/oss'
import WModal, { ModalFormComType } from '@/components/global/modal/form'
import Work from '@/models/work'
import { Admin } from '@/config/api'

@Component({
  name: 'ComAdminWebWork',
  components: {
    WModal,
    ImageUp
  }
})
export default class ComAdminWebWork extends Vue {
  model: Work | null = null
  icon = ''

  show (model?: Work) {
    this.model = model || null
    this.icon = model ? model.icon : '';
    (this.$refs.WModal as ModalFormComType).show()
  }

  async successFunc (values: any) {
    this.icon = await (this.$refs.ImageUp as OssImageUpType).upImage()
    const p = {
      ...values,
      icon: this.icon
    }
    const url = this.model
      ? `${Admin.work.update}${this.model._id}`
      : Admin.work.create
    const method = this.model ? '$put' : '$post'
    await this.$wAxios[method](url, p)
    this.$emit('success')
  }
}
</script>

<style scoped>
</style>
